<template>
    <div>
        <div class="cell">
            <div class="cell_item">
                <span>头像</span>
                <div class="value">
                    <div class="pad10">
                        <pub-upload-img 
                            width="100rpx"
                            height="100rpx"
                            upDes=""
                            v-model="avatorImg" 
                            class="whfull"></pub-upload-img>
                    </div>
                </div>
            </div>
            <div class="cell_item">
                <span>姓名</span>
                <div class="value">
                    <input type="text" v-model="userName" placeholder="请输入姓名" placeholder-class="placeholder">
                </div>
            </div>
            <div class="cell_item">
                <span>手机号</span>
                <div class="value">
                    <input type="tel" v-model="mobile" placeholder="请输入手机号" placeholder-class="placeholder">
                </div>
            </div>
            <!-- <div class="cell_item">
                <span>微信号</span>
                <div class="value">
                    <input type="text" v-model="wxnum" placeholder="请输入微信号" placeholder-class="placeholder">
                </div>
            </div> -->
            <div class="cell_item">
                <span>微信二维码</span>
                <div class="value">
                    <div class="pad10">
                        <pub-upload-img 
                            width="100rpx"
                            height="100rpx"
                            upDes=""
                            v-model="wxacodeUrl" 
                            class="whfull"></pub-upload-img>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="cell">
            <div class="cell_item">
                <span>显示名片</span>
                <div class="value">
                    <switch :checked="artShowCard" @change="artShowCardChange" color="@mainColor" />
                </div>
            </div>
        </div> -->
        <div class="add_btn" @click="submitInfo"> 保存 </div>


    </div>
</template>

<script>
import { updateUserInfo } from '@/request/user'
import { mapState } from 'vuex'
export default {
    data() {
        return {
            avatorImg: '',
            userName: '',
            mobile: '',
            wxnum: '',
            wxacodeUrl: '',
            artShowCard: false
        }
    },
    onLoad() {
        this.$refreshUserInfo().then(res => {
            this.avatorImg = res.data.headImg || ''
            this.userName = res.data.userName || ''
            this.mobile = res.data.userPhone || ''
            this.wxnum = res.data.wxnum || ''
            this.wxacodeUrl = res.data.wxacodeUrl || ''
            this.artShowCard = res.data.dynamicShowCard == '01'
            console.log(res);
        })
    },
    methods: {
        artShowCardChange(e) {
            this.artShowCard = e.detail.value
        },
        submitInfo() {
            updateUserInfo({
                wxnum: this.wxnum,
                headImg: this.avatorImg,
                userPhone: this.mobile,
                userName: this.userName,
                wxacodeUrl: this.wxacodeUrl,
                dynamicShowCard: this.artShowCard ? '01' : '00'
            }).then(res => {
                this.$interact.modal(res.msg).then(() => {
                    this.$navigate.back()
                })
            })
        }
    }

}
</script>

<style lang="less" scoped>
.cell{
    width: 100%;
    padding: 0 20rpx;
    background: #fff;
    margin-bottom: 20rpx;
    .cell_item{
        width: 100%;
        min-height: 100rpx;
        border-bottom: 1px solid #ddd;
        &:last-child{
            border-bottom: 0;
        }
        .align(v-center);
        span{
            width: 200rpx;
        }
        .value{
            flex: 1;
            width: 1px;
            display: flex;
            justify-content: flex-end;
            input{
                width: 100%;
                height: 100%;
                text-align: right;
                padding-right: 10rpx;
            }
        }
    }
}
.add_btn{
    position: fixed;
    bottom: 30rpx;
    left: 35rpx;
    width: 680rpx;
    height: 100rpx;
    .align(center);
    z-index: 2;
    border-radius: 50rpx;
    background: @mainColor;
    color: #fff;
    font-size: 40rpx;
    font-weight: bold;
}
</style>